import React from 'react';
import {Radio, Card, Typography, Flex, Space, Button} from 'antd';
import styles from './styles/PaymentMethod.module.less';
import {
  AlipayCircleOutlined,
  BackwardOutlined,
  MoneyCollectOutlined, RollbackOutlined,
  ScheduleOutlined,
  WechatOutlined
} from "@ant-design/icons";
import {useAccess} from "@@/exports";
import {IPaymentMethod} from "@/components/OrderPaymentModal/types";

const {Title, Text} = Typography;

interface PaymentMethodProps {
  paymentMethod: string;
  onChange: (method: string) => void;
  totalAmount: number;
  onBackOrder: () => void
}

const PaymentMethod: React.FC<PaymentMethodProps> = ({
                                                       paymentMethod,
                                                       onChange,
                                                       totalAmount,
                                                       onBackOrder
                                                     }) => {
  const access = useAccess()
  const paymentOptions: IPaymentMethod[] = [
    {
      value: 'wechat',
      permission: 'finance:wechat:charge',
      label: (
        <Flex justify={'start'} gap={'middle'}>
          <WechatOutlined style={{color: '#07C160', fontSize: 20}}/>
          <span>微信支付</span>
        </Flex>
      ),
      description: '扫描微信收款码完成支付'
    },
    {
      value: 'alipay',
      permission: 'finance:alipay:charge',
      label: (
        <Flex justify={'start'} gap={'middle'}>
          <AlipayCircleOutlined style={{color: '#1677FF', fontSize: 20}}/>
          <span>支付宝</span>
        </Flex>
      ),
      description: '扫描支付宝收款码完成支付'
    },
    {
      value: 'cash',
      permission: 'finance:cash:charge',
      label: (
        <Flex justify={'start'} gap={'middle'}>
          <MoneyCollectOutlined style={{color: '#FAAD14', fontSize: 20}}/>
          <span>现金支付</span>
        </Flex>
      ),
      description: '收取现金并确认'
    },
  ];

  // 过滤选项，只显示有权限的
  const filteredOptions = paymentOptions.filter(option =>
    !option.permission || access.has(option.permission)
  );

  return (
    <Card className={styles.card}>
      <div className={styles.amountInfo}>
        <Title level={4} className={styles.amountText}>
          应付金额: ¥{totalAmount.toFixed(2)}
        </Title>
        <Text type="secondary" className={styles.hintText}>
          请根据客户需求选择合适的支付方式
        </Text>
      </div>
      <div className={styles.paymentOptionsContainer}>
        <Radio.Group
          value={paymentMethod}
          onChange={(e) => {
            console.log(e.target.value)
            onChange(e.target.value)
          }}
          className={styles.radioGroup}
        >
          <Space direction="vertical" size={12} style={{width: '100%'}}>
            {filteredOptions.map((option) => (
              <Radio.Button
                key={option.value}
                value={option.value}
                className={styles.radioOption}
              >
                <div className={styles.optionContent}>
                  <div className={styles.optionText}>
                    <div className={styles.optionLabel}>{option.label}</div>
                    {option.description && (
                      <div className={styles.optionDescription}>{option.description}</div>
                    )}
                  </div>
                </div>
              </Radio.Button>
            ))}
          </Space>
        </Radio.Group>
      </div>
      <Flex justify={"end"} style={{marginTop: 20}}>
        <Button onClick={onBackOrder}>
          返回订单
        </Button>
      </Flex>
    </Card>
  );
};

export default PaymentMethod;
